<template>
    <div>
      <el-card class="main-card">
        <el-row>
          <el-col :span="8">
            <el-input placeholder="请输入内容"  clearable v-model="queryInfo.queryString" @clear="findPage" >
              <el-button slot="append" icon="el-icon-search" @click="findPage"></el-button>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left: 10px" @click="insert" v-hasPermission="['PER_USER_INSERT']" type="primary">添加信息</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableList"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading">
          <el-table-column type="index" label="序号"/>
          <el-table-column prop="label" label="角色标签"/>
          <el-table-column prop="code" label="角色标签值"/>
          <el-table-column label="是否启用" v-hasPermission="['PER_USER_UPDATE']">
            <template slot-scope="scope">
              <el-switch
                @change="updateStatus(scope.row)"
                v-model="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="primary" @click="update(scope.row)" v-hasPermission="['PER_USER_UPDATE']" size="small" icon="el-icon-edit" circle/>
              <el-button type="danger" @click="deleteById(scope.row.id)" v-hasPermission="['PER_USER_DELETE']" size="small" icon="el-icon-delete" circle/>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > 0"
          @size-change="handlePageSize"
          @current-change="handlePageNumber"
          :current-page="queryInfo.pageNumber"
          :page-sizes="[8, 25, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"/>
      </el-card>
      <!-- 表单添加/修改-->
      <el-dialog :title="title" class="dialog" :visible.sync="open" width="30%" @close="dialogClose">
        <el-form :model="form" ref="form" :rules="rules">
          <el-row>
            <el-col :span="11">
              <el-form-item label="角色标签" prop="label">
                <el-input v-model="form.label"/>
              </el-form-item>
            </el-col>
            <el-col :span="11"class="col-width">
              <el-form-item label="角色标签值" prop="code">
                <el-input v-model="form.code"/>
              </el-form-item>
            </el-col>
            <el-col :span="23">
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>菜单列表</span>
                  </div>
                  <el-tree
                    ref="tree"
                    check-strictly
                    highlight-current
                    :data="menuList"
                    show-checkbox
                    node-key="id"
                    :props="{ label:'title', children:'children'}"
                    @check-change="treeChange"/>
                </el-card>
            </el-col>
            <el-col :span="23">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>权限列表</span>
                </div>
                <el-checkbox-group v-model="checkPermissions">
                  <el-checkbox
                    border
                    size="small"
                    v-for="(item, index) in permissions"
                    :disabled="!item.status"
                    :label="item.label"
                    :value="item"
                    :key="index"
                    @change="permissionsChange(item)"/>
                </el-checkbox-group>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否启用" prop="status">
                <el-radio-group v-model="form.status" class="status-class">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clickCancel">取 消</el-button>
          <el-button type="primary" @click="clickOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          // 分页查询条件
          queryInfo: {
            // 页码
            pageNumber: 1,
            // 页数
            pageSize: 8,
            // 关键字
            queryString: null
          },
          // 表格数据
          tableList: [],
          // 总数记录
          total: 0,
          // 表单标题
          title: null,
          // 是否打开对话框
          open: false,
          // 表格加载
          loading: false,
          // 表单数据
          form: {
            status: true,
          },
          rules: {
            label: [
              { required: true, message: '请输入权限标签', trigger: 'blur' },
              { min: 1, max: 50, message: '权限标签的长度为1~50之间', trigger: 'blur' }
            ],
            code: [
              { required: true, message: '请输入权限标签值', trigger: 'blur' },
              { min: 1, max: 20, message: '权限标签的长度为1~20之间', trigger: 'blur' }
            ],
          },
          // 菜单列表
          menuList:[],
          checkMenus: [],
          // 权限列表
          permissions: [],
          // 选择的权限
          checkPermissions: [],
          checkPermis: [],
        }
      },
      /** 页面加载事件 **/
      created() {
        this.findPage();
        this.findMenusAndPermissions();
      },
      /** 方法 **/
      methods: {
        /** 查询所有的菜单信息 **/
        findMenusAndPermissions() {
          this.$ajax.get('/Menu/findParent').then((res) => {
            this.menuList = res.data.data;
            // 对菜单列表进行改造
            this.menuList.filter(item => {
              item.disabled = !item.status;
              if (item.children && item.children.length > 0) {
                item.children.filter(i => {
                  i.disabled = !i.status;
                });
              }
              return true;
            });
          });
          this.$ajax.get('/Permission/findAll').then((res) => {
            this.permissions = res.data.data;
          });
        },
        findPage() {
          this.loading = true;
          // 发送axios进行异步通讯 获取分页数据
          this.$ajax.post('/Role/findPage', this.queryInfo).then((res) => {
            this.loading = false;
            this.tableList = res.data.row;
            this.total = res.data.data;
          });
        },
        /** 打开新增对话框 **/
        insert() {
          this.title = '添加角色';
          this.open = true;
        },
        /** 打开修改对话框 **/
        update(row) {
          console.log(row);
          this.checkMenus = [];
          this.checkPermissions = [];
          this.form = row;
          this.title = '修改角色';
          row.menus.forEach(item => {
            this.checkMenus.push(item);
            if (item.children && item.children.length > 0) {
              this.checkMenus.push(i => {
                this.checkMenus.push(i);
              });
            }
          });
          row.permissions.forEach(item => {
            this.checkPermissions.push(item.label);
            this.checkPermis.push(item);
          });
          this.$nextTick(() => {
            this.$refs.tree.setCheckedNodes(this.checkMenus);
          });
          this.open = true;
        },
        /** 页码改变事件 **/
        handlePageNumber(newPageNumber) {
          // 将分页的新数据赋值给分页参数
          this.queryInfo.pageNumber = newPageNumber;
          // 调分页的方法
          this.findPage();
        },
        /** 页数改变事件 **/
        handlePageSize(newPageSize) {
          this.queryInfo.pageSize = newPageSize;
          this.findPage();
        },
        deleteById(id) {
          this.$confirm('您将操作永久删除编号为{' + id + '}的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 调后端删除权限接口
            this.$ajax.delete(`/Role/delete/${id}`).then((res) => {
              this.$message.success(res.data.message);
              this.queryInfo.pageNumber = 1;
              this.findPage();
            });
          }).catch(() => {

          });
        },
        /** 关闭对话框的事件 **/
        dialogClose() {
          this.checkPermissions = [];
          this.checkMenus = [];
          this.$refs.tree.setCheckedKeys([]);
          this.$refs.form.resetFields();
        },
        /** 点击取消 **/
        clickCancel() {
          this.checkPermissions = [];
          this.$refs.tree.setCheckedKeys([]);
          this.form = {};
          this.open = false;
          this.findPage();
        },
        /** 点击确定 **/
        clickOk() {
          this.$refs.form.validate((valid) => {
            // 校验不通过
            if (!valid) return this.$message.error('表单校验不通过，请检查后提交');
            this.form.menus = this.checkMenus;
            this.form.permissions = this.checkPermis;
            // 校验通过 判断是否是新增
            if (this.form.id === undefined || this.form.id === null) {
              this.$ajax.post(`/Role/insert`, this.form).then((res) => {
                this.$message.success(res.data.message);
                this.open = false;
                this.findPage();
              });
            } else {
              this.$ajax.put(`/Role/update`, this.form).then((res) => {
                this.$message.success(res.data.message);
                this.open = false;
                this.findPage();
              });
            }
          });
        },
        /** 改变角色数据的状态 **/
        updateStatus(row) {
          this.$ajax.put(`/Role/update`, row).then((res) => {
            this.$message.success('状态更新成功！');
          }).catch(() => {

          });
        },
        /** 勾选权限的事件 **/
        permissionsChange(item) {
          this.checkPermis.push(item);
        },
        treeChange() {
          this.checkMenus = [];
          // getCheckedNodes:获取tree控件选中值的数据
          // 第一个参数：是否获取父节点的数据
          // 第二个参数：
          const checks = this.$refs.tree.getCheckedNodes(false, true);
          checks.forEach(item => {
            this.checkMenus.push(item);
          });
        },
      }
    }

</script>

<style scoped>
  .col-width {
    margin-left: 20px;
  }
  .dialog {
    text-align: left;
  }
</style>
